<template>
  <view class="hire_page">
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" borderRadius="32rpx 32rpx 0 0">
      <view class="popup-container">
        <image class="close" src="https://taxi.raxan.xyz/wechat/static/images/store_detail/close.png" mode="" @click="closeVehConfig" />
        <view class="popup_body">
          <view class="popup_title">用户必读</view>
          <view class="popup_container">
            <view class="read">还车时间</view>
            <view class="read_item">
              <image class="dunpai" src="https://taxi.raxan.xyz/wechat/static/images/dunpai.png" mode="" />
              不满一年不退押金
            </view>
            <view class="read_item">
              <image class="dunpai" src="https://taxi.raxan.xyz/wechat/static/images/dunpai.png" mode="" />
              满一年可转租
            </view>
            <view class="read_item">
              <image class="dunpai" src="https://taxi.raxan.xyz/wechat/static/images/dunpai.png" mode="" />
              满三年免费送车
            </view>
            <view class="read_item">
              <image class="dunpai" src="https://taxi.raxan.xyz/wechat/static/images/dunpai.png" mode="" />
               半年后任意时间退车可退还已交租金现金价值部分 
            </view>
          
          </view>
          <view class="btn-warpper">
            <view class="btn" @click="imRead">我已阅读</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left"
      :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;"
        :style="{ color: 'rgb(' + srollColor + ',' + srollColor + ',' + srollColor + ')' }">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;" :style="{ filter: 'invert(' + 1 + ')' }">
          <image style="width: 48rpx;height: 48rpx;" :src="imgs.CHEVRO" mode="" />
        </view>
      </view>
      <view id="top"></view>
    </view>
    <!-- banner -->
    <swiper class="_w-max custom_banner" style="height: 520rpx;" :autoplay="true" indicator-dots :interval="3000"
      :duration="1000">
      <swiper-item v-for="(item, index) in details.banners" :key="index">
        <image class="_w-max _h-max" :src="item"></image>
      </swiper-item>
    </swiper>
    <view class="container">
      <view class="head">
        <view class="name">{{ details.type_name }}</view>
        <view class="guide_price">指导价{{ details.guide_money }} 万元</view>
        <view class="price">
          <view class="label">新车：</view>
          <view>{{ details.price_month }}元/月 {{ details.price }}元/天</view>
        </view>
        <view class="poi_store" @click="toPoi">
          <view class="store_name">{{ details.store_name }}</view>
          <image class="poi" :src="imgs.POI"></image>
        </view>
        <view class="tag-wrapper">
          <view class="tag" v-for="tag in details.tag || []" :key="tag">{{ tag }}</view>
        </view>
      </view>
      <view class="body">
        <div style="height: 96rpx;">
          <view class="tabs" id="tabs" :class="{ fixTop: fixTop }" :style="fixTop ? ('margin-top:' + recHeight) : ''">
            <view class="tabs-item" :class="{ 'tabs-item-active': selEl === tab.el }" @click="switchTab(tab.el, index)"
              v-for="(tab, index) in tabs" :key="tab.el">
              {{ tab.text }}
              <view class="tab_btm"></view>
            </view>
          </view>
        </div>
        <view class="body_inner">
          <view class="body_block" id="basic">
            <view class="body_title">基本信息</view>
            <view class="basic">
              <view class="basic_item">
                <view class="basic_label">车型结构</view>
                <view class="basic_value">{{ details.car_cate }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">变速箱</view>
                <view class="basic_value">{{ details.gear === 'auto' ? '自动' : '手动' }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">座位数</view>
                <view class="basic_value">{{ details.seat_num }}座</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">能源类型</view>
                <view class="basic_value">{{ details.energy_type }}</view>
              </view>
              <view class="basic_item">
                <view class="basic_label">排量</view>
                <view class="basic_value">{{ details.power }}</view>
              </view>
            </view>
          </view>
          <view class="body_block" id="config">
            <view class="body_title">车型配置</view>
            <view class="config">
              <view class=" config_item" v-for="config in details.car_config || []" :key="config.id">
              <view>{{ config.name }}</view>
              <image class="config_select" src="https://taxi.raxan.xyz/wechat/static/images/select.png" mode="" />
            </view>
          </view>
        </view>
        <view class="body_block" id="introduce">
          <view class="body_title">车辆介绍</view>
          <view style="margin-top: 32rpx;margin-bottom: 26rpx;">
            <rich-text :nodes="details.introduce"></rich-text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-warpper" style="position: fixed;">
    <view class="btn" @click="toHireCar">立即租车</view>
  </view>
  </view>
</template>
<script>
import { fetchCarDetail } from '@/api/hire.js'

const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
  POI: 'https://taxi.raxan.xyz/wechat/static/images/iocn-poiadress.png',
  BANNER: concat('image.png')
}

export default {
  data() {
    return {
      fixTop: false,
      scrollFilter: 0,
      recHeight: 0,
      srollOpacity: 0,
      srollColor: 255,
      imgs: IMAGES,
      loading: false,
      id: '',
      selEl: '#basic',
      distanceArr: [],
      tabTop: 0,
      headTop: 0,
      tabs: [
        { text: '基本信息', el: '#basic' },
        { text: '车型配置', el: '#config' },
        { text: '车辆介绍', el: '#introduce' }
      ],
      details: {
        tag: [],
        banners: []
      },
      userRead: false,
    }
  },
  onPageScroll(e) {
    this.scrollFilter = e.scrollTop < 100 ? Math.floor(e.scrollTop / 100) : 1;
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
    this.fixTop = e.scrollTop + this.headTop + this.recHeightNum > this.tabTop;
  },
  onLoad(options) {
    this.id = options.id;
    this.getPhoneInfo();
    this.fetchCarDetail();
  },
  methods: {
    imRead() {
      this.userRead = true
      this.closeVehConfig()
      this.tsigns()
    },
    openVehConfig() {
      this.$refs.popup.open('bottom');
    },
    closeVehConfig() {
      this.$refs.popup.close();
    },
    tsigns() {
      const { id } = this.details;
       uni.navigateTo({ url: `/pages/hire_sub/sublease/chooseRoles?id=${id}&order_id=${id}&type=1` })
      
    },
    toHireCar() {
      if (!this.userRead) {
        return this.openVehConfig();
      }
      this.tsigns()
    },
    getDistanceArr() {
      const _this = this
      uni.createSelectorQuery().select('#top').boundingClientRect(data => {
        _this.headTop = data.top
        console.log(_this.headTop)
      }).exec()
      uni.createSelectorQuery().select('#tabs').boundingClientRect(data => {
        _this.tabTop = data.top
        console.log(_this.tabTop)
      }).exec()
      _this.tabs.map(tab => {
        uni.createSelectorQuery().select(tab.el).boundingClientRect(data => {
          _this.distanceArr.push(data.top)
        }).exec()
      })
    },
    back() {
      uni.navigateBack()
    },
    switchTab(el, i) {
      this.selEl = el;
      const top = this.distanceArr[i] - 96 - this.recHeightNum;
      uni.pageScrollTo({
        scrollTop: top,
        duration: 500,
      });
    },
    toPoi() {
      const { latitude, longitude, store_name: poiaddress } = this.details;
      const param = { latitude, longitude, poiaddress }
      console.log(param)
      uni.navigateTo({
        url: `/pages/store_sub/address/index?param=${JSON.stringify(param)}`
      })
    },
    fetchCarDetail() {
      const params = {
        id: this.id
      }
      this.checkLoading(
        () => fetchCarDetail(params).then(res => {
          this.details = res.data;
          this.details.banners = this.details.detail_img.split(',').filter(i => !!i);
          setTimeout(() => this.getDistanceArr())
        })
      )
    },
    checkLoading(fn) {
      this.loading = true;
      uni.showLoading({ title: '加载中' })
      fn().finally(() => {
        this.loading = false;
        uni.hideLoading()
      })
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeightNum = res.statusBarHeight;
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.fixTop {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
  top: 96rpx;
}

.custom_banner {

  //未选中的指示点样式，支持h5、app
  /deep/ .uni-swiper-dot {
    width: 36rpx;
    height: 4rpx;
    border-radius: 0 !important;
    background: #F1F4F5 !important;
  }

  //选中的指示点样式，支持h5、app
  /deep/ .uni-swiper-dot-active {
    background: #366EF4 !important;
  }

  //未选中的指示点样式，支持微信小程序
  /deep/ .wx-swiper-dot {
    width: 36rpx;
    height: 4rpx;
    border-radius: 0 !important;
    background: #F1F4F5 !important;
  }

  //选中的指示点样式，支持微信小程序
  /deep/ .wx-swiper-dot-active {
    background: #366EF4 !important;
  }

  //指示点位置，支持h5、app
  /deep/ .uni-swiper-dots-horizontal {
    bottom: 64rpx !important;
    text-align: right;
    height: 0rpx;
  }

  //指示点位置，支持微信小程序
  /deep/ .wx-swiper-dots-horizontal {
    bottom: 64rpx !important;
    text-align: right;
    height: 0rpx;
  }
}

.container {
  margin-top: -40rpx;
  position: relative;
  z-index: 1;
  padding-bottom: 112rpx;

  .head {
    background-color: #FFFFFF;
    border-radius: 32rpx 32rpx 0px 0px;
    padding: 32rpx;
    padding-top: 44rpx;
    margin-bottom: 20rpx;

    .name {
      height: 56rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: rgba(0, 0, 0, 0.9);
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .guide_price {
      margin-top: 24rpx;
      height: 48rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #008DFF;
      text-align: left;
    }

    .price {
      margin-top: 24rpx;
      display: flex;
      height: 40rpx;
      align-items: center;
      justify-content: flex-start;
      font-weight: bold;
      font-size: 32rpx;
      color: #FF5700;

      .label {
        width: 96rpx;
        flex: 0 0 96rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        text-align: left;
      }
    }

    .poi_store {
      display: flex;
      padding: 24rpx 0;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #E7E7E7;
      margin-bottom: 24rpx;

      .store_name {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
        text-align: left;
      }

      .poi {
        width: 40rpx;
        flex: 0 0 40rpx;
        height: 40rpx;
      }
    }

    .tag-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;

      .tag {
        background: #E5F3FF;
        border-radius: 0rpx 0rpx 8rpx 0rpx;
        padding: 0 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #111E36;
      }
    }
  }

  .body {
    background-color: #FFFFFF;

    .tabs {
      height: 96rpx;
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      background-color: #FFFFFF;

      .tabs-item {
        padding: 0 32rpx;
        color: rgba(0, 0, 0, 0.6);
        font-size: 28rpx;
        line-height: 96rpx;
        text-align: center;
        position: relative;

        .tab_btm {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 32rpx;
          height: 6rpx;
          background: #008DFF;
          border-radius: 1998px 1998px 1998px 1998px;
          display: none;
        }

        &.tabs-item-active {
          font-weight: 600;
          font-size: 40rpx;
          color: #008DFF;

          .tab_btm {
            display: block;
          }
        }
      }
    }

    .body_inner {
      padding: 20rpx 32rpx;

      .body_block {
        border-bottom: 1px solid #E7E7E7;
        margin-bottom: 28rpx;

        &:last-child {
          border: none;
          margin-bottom: 0;
        }

        .body_title {
          height: 44rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);
          line-height: 44rpx;
          text-align: left;
        }

        .basic {
          display: flex;
          flex-wrap: wrap;
          margin-top: 32rpx;

          .basic_item {
            width: 50%;
            flex: 0 0 50%;
            display: flex;
            height: 40rpx;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 28rpx;

            .basic_label {
              flex: 0 0 50%;
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.6);
              font-weight: 400;
            }

            .basic_value {
              flex: 0 0 50%;
              font-weight: 500;
              font-size: 28rpx;
              color: rgba(0, 0, 0, 0.9);
            }
          }
        }

        .config {
          margin-top: 36rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;

          .config_item {
            flex: 0 0 50%;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 32rpx;

            .config_select {
              flex: 0 0 48rpx;
              width: 48rpx;
              height: 48rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }
}

.btn-warpper {

  left: 0;
  right: 0;
  bottom: 0;
  padding: 8rpx 32rpx;
  z-index: 10;
  border-top: 1rpx solid #E7E7E7;
  background-color: #FFFFFF;

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
  }
}

.f_s_18 {
  font-size: 36rpx;
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-container {
    height: 684rpx;
    position: relative;
    .close {
      height: 44rpx;
      width: 44rpx;
      position: absolute;
      right: 16rpx;
      top: 16rpx;
    }
    .popup_title {
      padding: 48rpx;
      padding-bottom: 44rpx;
      line-height: 48rpx;
      text-align: center;
      font-weight: 600;
      font-size: 32rpx;
      color: rgba(0,0,0,0.9);
    }
    .popup_container {
      padding: 0 32rpx 28rpx 32rpx;
      .read {
        line-height: 48rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: rgba(0,0,0,0.9);
        margin-bottom: 32rpx;
      }
      .read_item {
        display: flex;
        gap: 24rpx;
        align-items: center;
        justify-content: flex-start;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(0,0,0,0.6);
        margin-bottom: 32rpx;
        .dunpai {
          width: 48rpx;
          flex: 0 0 48rpx;
          height: 48rpx;
        }
      }
    }
  }
</style>